import React, { useEffect ,useState} from 'react'
import { getAudit, auditArticle } from '../../../api/Audit-manageApi'
import { Table, Button, notification } from 'antd'

export default function Audit() {
    const [dataSource, setdataSource] = useState([])
    // 列表总条数
    const [total, setTotal] = useState(1)
    // 获取待审核的文章
    useEffect(() => {
        getList()
    }, [])
    // 表头
    const columns = [
        {
            title: '新闻标题',
            dataIndex: 'title',
            render: (title, item) => {
                return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
            }
        },
        {
            title: '作者',
            dataIndex: 'author'
        },
        {
            title: "新闻分类",
            dataIndex: 'categoryName',
            render: (categoryName) => {
                return <div>{categoryName}</div>
            } 
        },
        {
            title: "操作",
            render: (item) => {
                return <div>
                    <Button type="primary" onClick={() => handleAudit(item, 1, 2)}>通过</Button>
                    <Button style={{marginLeft:'10px'}} danger onClick={() => handleAudit(item, 2, 0)}>驳回</Button>
                </div>
            }
        }
    ];
    // 获取列表
    const getList = (page, limit) => {
        getAudit({
            publishState:0,
            auditState:0,
            page: page || 1,
            limit: limit || 10
        }).then(res => {
            setTotal(res.queryPageList.total)
            let list = res.queryPageList.records
            setdataSource(list)
        })
    }
    // 分页器回调
    const handlePageChange = (page, pageSize) => {
        getList(page, pageSize)
    }
    // 审核通过和驳回的回调
    const handleAudit = (item,auditState,publishState) => {
        // 发布：改成审核通过并且，待发布状态
        // 驳回：改成审核不通过
        auditArticle({
            pageId: item.pageId,
            publishState,
            auditState
        }).then(res => {
            getList()
                notification.info({
                    message: `通知`,
                    description:
                        `您可以到[审核管理/审核列表]中查看您的新闻的审核状态`,
                    placement: "bottomRight"
                });
            }
        )
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
                pagination={{
                    total: total,
                    onChange: (page, pageSize) => handlePageChange(page, pageSize), //改变页码的函数
                    showSizeChanger: true,
                    showQuickJumper: false,
                }}
                rowKey={item => item.pageId}
            />
        </div>
    )
}
